<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>授权决定</title>
</head>

<body>
    <div style="width: 500px;margin: auto;">
        <h2 th:text="'是否同意'+ ${clientName}+ '访问您的以下权限'"></h2>

        <table style=" margin-left: auto;margin-right: auto;">
            <tr>
                <th>选择</th>
                <th>权限</th>
            </tr>
            <tr th:each="scope : ${scopes}">
                <td>
                    <input type="checkbox" class="scope" th:checked="${requestScopes.contains(scope)}"
                        th:attr="name=${scope}">
                </td>
                <td th:text="${scope}">Onions</td>
            </tr>
        </table>

        <div style="width: 100px;margin: auto;">
            <button onclick="toAuthorization()">同意</button>
        </div>

    </div>
    <script>
        function toAuthorization() {
            let checkBoxScopes = document.getElementsByClassName("scope");

            let grantedScopes = ""
            for (const inputElement of checkBoxScopes) {
                if(inputElement.checked){
                    grantedScopes+="&grantedScopes="+inputElement.name
                }
            }

            window.location.href=" [[${authorizationUri}]]"+"?oauth2AuthorizationDecision=true"+grantedScopes
        }

    </script>
</body>

</html>